<template>
  <div class="message">
    <div class="i-layout-page-header">
      <span class="ivu-page-header-title">{{ $route.meta.title }}</span>
    </div>
    <div class="table-box" style="padding-bottom: 0">
      <Card :bordered="false" dis-hover class="">
        <!-- 第一步：输入图谱信息 -->
        <div v-if="currentStep === 1">
          <h2>构建图谱</h2>
          <Form :model="graphForm" :label-width="100" style="width: 500px; margin: 20px auto;">
            <FormItem label="图谱名称">
              <Input v-model="graphForm.name" placeholder="请输入图谱名称" />
            </FormItem>
            <FormItem label="图谱描述">
              <Input v-model="graphForm.description" type="textarea" placeholder="请输入图谱描述（可选）" />
            </FormItem>
            <FormItem>
              <Button type="primary" @click="startBuildGraph">开始构建图谱</Button>
            </FormItem>
          </Form>
        </div>
        
        <!-- 第二步：构建进度 -->
        <div v-else-if="currentStep === 2">
          <h2>构建进度</h2>
          <div style="width: 500px; margin: 20px auto; text-align: center;">
            <Progress :percent="buildProgress" status="active" />
            <p style="margin-top: 20px;">正在构建图谱，请稍候...</p>
          </div>
        </div>
        
        <!-- 第三步：预览图谱 -->
        <div v-else-if="currentStep === 3">
          <h2>图谱预览</h2>
          <div style="margin-bottom: 20px; text-align: center;">
            <Button @click="exportImage" type="primary" style="margin-right: 10px;">导出图片</Button>
            <Button @click="regenerateGraph" type="default">重新生成</Button>
          </div>
          <ChartTree :options="options" ref="chartTree"></ChartTree>
        </div>
      </Card>
    </div>
  </div>
</template>

<script>
import ClipboardJS from 'clipboard';
import { ChartTree } from '@opentiny/vue'
import { generateGraphDataApi } from '@/api/deepseek';

export default {
  components: { ChartTree },
  data() {
    return {
      currentStep: 1, // 当前步骤：1-输入信息，2-构建进度，3-预览图谱
      graphForm: {
        name: '',
        description: ''
      },
      buildProgress: 0, // 构建进度
      options: {
        // 图表类型（线型树图）
        type: 'LineTreeChart',
        // padding控制图表距离容器的上、右、下、左padding值
        padding: [20, 80, 20, 80],
        // 图元的大小，默认值10
        symbolSize: 10,
        // 连线的形状，仅type为LineTreeChart有效，'curve'或'polyline',默认值'curve'
        lineType: 'curve',
        // 初始树图的展开层级，最小值为1，默认值1
        initialTreeDepth: 10, // 全部展开
        // 树图的起点方向，仅type为LineTreeChart有效，取值'left','right','top','bottom',默认值'left'
        direction: 'left',
        data: []
      }
    }
  },
  created() {
    
  },
  mounted() {
    
  },
  methods: {
    // 开始构建图谱
    startBuildGraph() {
      if (!this.graphForm.name) {
        this.$Message.warning('请输入图谱名称')
        return
      }
      
      // 进入第二步
      this.currentStep = 2
      
      // 模拟构建进度
      this.simulateBuildProgress()
    },
    
    // 模拟构建进度
    simulateBuildProgress() {
      const timer = setInterval(() => {
        this.buildProgress += 10
        if (this.buildProgress >= 100) {
          clearInterval(timer)
          // 构建完成后进入第三步
          this.generateGraphData()
          this.currentStep = 3
        }
      }, 500)
    },
    
    // 生成图谱数据
    generateGraphData() {
      // 调用deepseek API生成图谱数据
      generateGraphDataApi({ topic: this.graphForm.name })
        .then(response => {
          // 假设API返回的数据结构包含一个data字段，其中包含图谱数据
          if (response.data && response.data.choices && response.data.choices.length > 0) {
            // 解析API返回的JSON数据
            const graphData = JSON.parse(response.data.choices[0].message.content);
            this.options.data = [graphData];
          } else {
            // 如果API没有返回有效数据，使用示例数据
            this.options.data = [
              {
                name: this.graphForm.name,
                description: this.graphForm.description,
                children: [
                  {
                    name: '生物医药产业',
                    children: [
                      {
                        name: 'datas',
                        children: [
                          {
                            name: 'converters',
                            children: [
                              { name: 'Converters', value: 721 },
                              { name: 'DelimitedTextConverter', value: 4291 }
                            ]
                          },
                          {
                            name: 'DataUtil',
                            value: 3321
                          }
                        ]
                      },
                      {
                        name: 'display',
                        children: [
                          { name: 'DirtySprite', value: 8831 },
                          { name: 'LineSprite', value: 1731 },
                          { name: 'RectSprite', value: 3621 }
                        ]
                      }
                    ]
                  }
                ]
              }
            ];
          }
        })
        .catch(error => {
          console.error('生成图谱数据时出错:', error);
          // 出错时使用示例数据
          this.options.data = [
            {
              name: this.graphForm.name,
              description: this.graphForm.description,
              children: [
                {
                  name: '生物医药产业',
                  children: [
                    {
                      name: 'datas',
                      children: [
                        {
                          name: 'converters',
                          children: [
                            { name: 'Converters', value: 721 },
                            { name: 'DelimitedTextConverter', value: 4291 }
                          ]
                        },
                        {
                          name: 'DataUtil',
                          value: 3321
                        }
                      ]
                    },
                    {
                      name: 'display',
                      children: [
                        { name: 'DirtySprite', value: 8831 },
                        { name: 'LineSprite', value: 1731 },
                        { name: 'RectSprite', value: 3621 }
                      ]
                    }
                  ]
                }
              ]
            }
          ];
        });
    },
    
    // 导出图片
    exportImage() {
      // 这里应该实现导出图片的功能
      this.$Message.info('导出图片功能待实现')
    },
    
    // 重新生成
    regenerateGraph() {
      this.currentStep = 1
      this.graphForm = {
        name: '',
        description: ''
      }
      this.buildProgress = 0
      this.options.data = []
    }
  },
};
</script>
<style scoped lang="less">
.ivu-input-group > .ivu-input:last-child,
/deep/.ivu-input-group-append {
  background: none;
  color: #999999;
}
/deep/.ivu-input-group .ivu-input {
  border-right: 0px !important;
}
.content /deep/.ivu-form .ivu-form-item-label {
  width: 133px;
}
.topIput {
  width: 186px;
  background: #ffffff;
  border-right: 0px !important;
}
.abbreviation {
  .top {
    display: flex;
    justify-content: flex-start;
    .topBox {
      display: flex;
      .topRight {
        width: 254px;
        margin-left: 36px;
      }
      .topLeft {
        width: 94px;
        height: 94px;

        text-align: center;
        font-size: 13px;
        font-weight: 400;
        color: #000000;
        .img {
          // width: 84px;
          height: 67px;
          background: #f7fbff;
          border-radius: 4px;
          margin-bottom: 9px;
          .imgs {
            width: 70px;
            height: 51px;
            display: inline-block;
            text-align: center;
            margin-top: 8px;
          }
        }
      }
    }
  }
  .content {
    /deep/.ivu-form-item-label {
      width: 120px;
    }
    .flex {
      display: flex;
      justify-content: flex-start;
      // width: 400px;

      .contentIput {
        width: 400px;
      }
      .conents {
        display: flex;
        .title {
          width: 30px;
          margin-top: 70px;
          margin-left: 6px;
        }
        .positionBox {
          display: flex;
          flex-wrap: wrap;
          width: 101px;
          height: 99px;
          border-right: 1px solid #dddddd;
          .box {
            width: 33px;
            height: 33px;
            // border-radius: 4px 0px 0px 0px;
            border: 1px solid #dddddd;
            cursor: pointer;
          }
          .on {
            background: rgba(24, 144, 255, 0.1);
          }
        }
      }
    }
  }
}
</style>
<style scoped>
.message /deep/ .ivu-table-header thead tr th {
  padding: 8px 16px;
}
.ivu-radio-wrapper {
  margin-right: 15px;
  font-size: 12px !important;
}
.message /deep/ .ivu-tabs-tab {
  border-radius: 0 !important;
}
.table-box {
  padding: 20px;
}
</style>
